<template>
  <van-tabbar v-model="active" active-color="#fc6627">
    <van-tabbar-item icon="home-o" to="/">
      <span>首页</span>
      <template v-slot:icon="{ active }">
        <!-- <van-icon v-if="active" name="search" />
        <van-icon v-else name="home-o"></van-icon> -->
        <GeekIcon v-if="active" name="home-sel"></GeekIcon>
        <GeekIcon v-else name="home"></GeekIcon>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/question">
      <span>问答</span>
      <template #icon="props">
        <GeekIcon :name="props.active ? 'qa-sel' : 'qa'"></GeekIcon>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/video">
      <span>视频</span>
      <template #icon="props">
        <GeekIcon :name="props.active ? 'video-sel' : 'video'"></GeekIcon>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/user">
      <span>我的</span>
      <template #icon="props">
        <GeekIcon :name="props.active ? 'mine-sel' : 'mine'"></GeekIcon>
      </template>
    </van-tabbar-item>
    <!-- <van-tabbar-item icon="home-o" to="/question">问答</van-tabbar-item> -->
    <!-- <van-tabbar-item icon="home-o" to="/video">视频</van-tabbar-item> -->
    <!-- <van-tabbar-item icon="home-o" to="/user">我的</van-tabbar-item> -->
  </van-tabbar>
</template>

<script>
// import GeekIcon from './geek-icon.vue'
export default {
  //   components: {
  //     GeekIcon
  //   },
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style></style>
